<template>
  <!-- <HelloWorld msg="Welcome to Your Vue.js App" :set-num="setNum"/> -->
  <!-- <div>
    <my-article
    v-bind='article'
    ></my-article>
  </div> -->
  <div>
    <my-dome
    :count='count'
    btn-type='success'
    :add-count="addCount"
    ></my-dome>
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue";
// import MyArticle from "./components/MyArticle";
import MyDome from './components/MyDome'
/**
 * 单向数据流
 *
 * 一种组件化中数据流向的规范
 *
 * 数据总是从父组件向子组件流动，子组件不可改变父组件流入的数据（属性 props）
 *
 * 子组件-》更改数据-》数据属于父组件定义的
 * v-bing:obj 会把obj中数据解构出来
 * v-bing:obj => :a="obj.a" => :b="obj.b"
 */
export default {
  name: "App",
  components: {
    // HelloWorld,
    // MyArticle,
    MyDome
  },
  data() {
    return {
        count:0,
        status:1,



      article: {
        title: "This is my Title",
        isRecom: true,
        status: '1',
        author: {
          name: "作者",
          website: "https://www.baidu.com",
          follows: 2000,
        },
        content: "This is my Content",
        commentCount: 5,
        comments: [
          {
            id: 1,
            content: "This is my content1",
            dataTiem: "2021-09-23 12:02:23",
          },
          {
            id: 2,
            content: "This is my content2",
            dataTiem: "2021-09-23 12:02:23",
          },{
            id: 3,
            content: "This is my content3",
            dataTiem: "2021-09-23 12:02:23",
          },{
            id: 4,
            content: "This is my content4",
            dataTiem: "2021-09-23 12:02:23",
          },{
            id: 5,
            content: "This is my content5",
            dataTiem: "2021-09-23 12:02:23",
          },{
            id: 6,
            content: "This is my content6",
            dataTiem: "2021-09-23 12:02:23",
          },
        ],
      },
    };
  },
  methods: {
    setNum() {
      console.log("点击");
    },
     addCount(){
       console.log(1343);
        this.count++;  
      },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
